"use client"

import React, { useState } from 'react'
import { MainLayout } from '@/components/layout/main-layout'
import { Button } from '@/components/ui/button'
import { 
  Settings, 
  Database, 
  Shield, 
  Bell, 
  Palette,
  Users,
  Activity,
  Save,
  RefreshCw
} from 'lucide-react'

// 设置项组件
function SettingItem({ 
  icon: Icon, 
  title, 
  description, 
  children 
}: {
  icon: any
  title: string
  description: string
  children: React.ReactNode
}) {
  return (
    <div className="flex items-start space-x-4 p-4 border-b border-gray-100 last:border-0">
      <div className="p-2 bg-blue-100 rounded-lg">
        <Icon className="h-5 w-5 text-blue-600" />
      </div>
      <div className="flex-1">
        <h3 className="font-medium text-gray-900">{title}</h3>
        <p className="text-sm text-gray-500 mt-1">{description}</p>
        <div className="mt-3">
          {children}
        </div>
      </div>
    </div>
  )
}

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    notifications: {
      email: true,
      push: false,
      sms: true
    },
    system: {
      autoBackup: true,
      dataRetention: '365',
      maintenanceMode: false
    },
    security: {
      twoFactor: false,
      sessionTimeout: '30',
      passwordPolicy: 'strong'
    }
  })

  const handleSave = () => {
    // 保存设置逻辑
    console.log('保存设置:', settings)
  }

  const handleReset = () => {
    // 重置设置逻辑
    console.log('重置设置')
  }

  return (
    <MainLayout title="系统设置">
      <div className="space-y-6">
        {/* 操作栏 */}
        <div className="flex items-center justify-between">
          <div>
            <h2 className="text-2xl font-bold text-gray-900">系统配置</h2>
            <p className="text-gray-600 mt-1">管理系统的各项配置和参数</p>
          </div>
          <div className="flex space-x-3">
            <Button variant="outline" onClick={handleReset}>
              <RefreshCw className="h-4 w-4 mr-2" />
              重置
            </Button>
            <Button onClick={handleSave}>
              <Save className="h-4 w-4 mr-2" />
              保存设置
            </Button>
          </div>
        </div>

        {/* 设置分组 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 通知设置 */}
          <div className="bg-white rounded-lg border border-gray-200">
            <div className="p-6 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900 flex items-center">
                <Bell className="h-5 w-5 mr-2" />
                通知设置
              </h3>
            </div>
            <div className="divide-y divide-gray-100">
              <SettingItem
                icon={Bell}
                title="邮件通知"
                description="接收系统重要通知和警报"
              >
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={settings.notifications.email}
                    onChange={(e) => setSettings({
                      ...settings,
                      notifications: {
                        ...settings.notifications,
                        email: e.target.checked
                      }
                    })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <span className="ml-2 text-sm text-gray-700">启用邮件通知</span>
                </label>
              </SettingItem>
              
              <SettingItem
                icon={Bell}
                title="推送通知"
                description="浏览器推送通知"
              >
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={settings.notifications.push}
                    onChange={(e) => setSettings({
                      ...settings,
                      notifications: {
                        ...settings.notifications,
                        push: e.target.checked
                      }
                    })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <span className="ml-2 text-sm text-gray-700">启用推送通知</span>
                </label>
              </SettingItem>

              <SettingItem
                icon={Bell}
                title="短信通知"
                description="重要事件短信提醒"
              >
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={settings.notifications.sms}
                    onChange={(e) => setSettings({
                      ...settings,
                      notifications: {
                        ...settings.notifications,
                        sms: e.target.checked
                      }
                    })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <span className="ml-2 text-sm text-gray-700">启用短信通知</span>
                </label>
              </SettingItem>
            </div>
          </div>

          {/* 安全设置 */}
          <div className="bg-white rounded-lg border border-gray-200">
            <div className="p-6 border-b border-gray-200">
              <h3 className="text-lg font-semibold text-gray-900 flex items-center">
                <Shield className="h-5 w-5 mr-2" />
                安全设置
              </h3>
            </div>
            <div className="divide-y divide-gray-100">
              <SettingItem
                icon={Shield}
                title="双因素认证"
                description="增强账户安全性"
              >
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={settings.security.twoFactor}
                    onChange={(e) => setSettings({
                      ...settings,
                      security: {
                        ...settings.security,
                        twoFactor: e.target.checked
                      }
                    })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <span className="ml-2 text-sm text-gray-700">启用双因素认证</span>
                </label>
              </SettingItem>

              <SettingItem
                icon={Shield}
                title="会话超时"
                description="自动登出时间设置"
              >
                <select
                  value={settings.security.sessionTimeout}
                  onChange={(e) => setSettings({
                    ...settings,
                    security: {
                      ...settings.security,
                      sessionTimeout: e.target.value
                    }
                  })}
                  className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                >
                  <option value="15">15分钟</option>
                  <option value="30">30分钟</option>
                  <option value="60">1小时</option>
                  <option value="120">2小时</option>
                </select>
              </SettingItem>

              <SettingItem
                icon={Shield}
                title="密码策略"
                description="密码复杂度要求"
              >
                <select
                  value={settings.security.passwordPolicy}
                  onChange={(e) => setSettings({
                    ...settings,
                    security: {
                      ...settings.security,
                      passwordPolicy: e.target.value
                    }
                  })}
                  className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                >
                  <option value="weak">弱</option>
                  <option value="medium">中等</option>
                  <option value="strong">强</option>
                </select>
              </SettingItem>
            </div>
          </div>
        </div>

        {/* 系统设置 */}
        <div className="bg-white rounded-lg border border-gray-200">
          <div className="p-6 border-b border-gray-200">
            <h3 className="text-lg font-semibold text-gray-900 flex items-center">
              <Database className="h-5 w-5 mr-2" />
              系统设置
            </h3>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-0 divide-y lg:divide-y-0 lg:divide-x divide-gray-100">
            <div className="p-6">
              <SettingItem
                icon={Database}
                title="自动备份"
                description="定期备份系统数据"
              >
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={settings.system.autoBackup}
                    onChange={(e) => setSettings({
                      ...settings,
                      system: {
                        ...settings.system,
                        autoBackup: e.target.checked
                      }
                    })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <span className="ml-2 text-sm text-gray-700">启用自动备份</span>
                </label>
              </SettingItem>

              <SettingItem
                icon={Database}
                title="数据保留期"
                description="数据保存时间设置"
              >
                <select
                  value={settings.system.dataRetention}
                  onChange={(e) => setSettings({
                    ...settings,
                    system: {
                      ...settings.system,
                      dataRetention: e.target.value
                    }
                  })}
                  className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
                >
                  <option value="90">90天</option>
                  <option value="180">180天</option>
                  <option value="365">1年</option>
                  <option value="730">2年</option>
                  <option value="-1">永久保存</option>
                </select>
              </SettingItem>
            </div>

            <div className="p-6">
              <SettingItem
                icon={Settings}
                title="维护模式"
                description="系统维护时启用"
              >
                <label className="flex items-center">
                  <input
                    type="checkbox"
                    checked={settings.system.maintenanceMode}
                    onChange={(e) => setSettings({
                      ...settings,
                      system: {
                        ...settings.system,
                        maintenanceMode: e.target.checked
                      }
                    })}
                    className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                  />
                  <span className="ml-2 text-sm text-gray-700">启用维护模式</span>
                </label>
              </SettingItem>

              <div className="mt-6">
                <h4 className="font-medium text-gray-900 mb-3">系统信息</h4>
                <div className="space-y-2 text-sm text-gray-600">
                  <div className="flex justify-between">
                    <span>系统版本:</span>
                    <span>v1.0.0</span>
                  </div>
                  <div className="flex justify-between">
                    <span>数据库版本:</span>
                    <span>MySQL 8.0</span>
                  </div>
                  <div className="flex justify-between">
                    <span>最后更新:</span>
                    <span>2024-01-15</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </MainLayout>
  )
}